커스텀 에러 페이지

✒️ 2025-05-28 11:12 내용 수정

• Next.js에서 제공하는 정적 에러 페이지를 이용하여 커스텀 에러 페이지를 만들고, 에러가 발생하면 바로 라우팅해서 해당 페이지로 이동시킬 수 있다.
  • 참고 자료 : Next Custom Errors

1. 404 페이지

• 404 페이지는 매우 자주 접근할 가능성이 있으며, 에러 페이지를 매 방문마다 서버에서 렌더링하는 것은 Next.js 서버에 큰 부하를 걸 수 있어 비용 증가와 사용 경험에 부정적 영향을 끼친다.
• Next.js에서는 정적 404 페이지를 만들어 추가적인 에러 페이지 파일을 만들 필요 없이 바로 라우팅을 해줄 수 있다.
• pages/ 폴더에 404.js 파일을 만들면 커스텀 404 페이지를 만들 수 있다.
  • 404 페이지에 getStaticProps()를 사용해 페이지에 data를 fetch할 수 있다.
  • Next.js 서버는 빌드 시간에 데이터를 fetch하고, 빌드 시간에 해당 페이지를 미리 렌더한다.
  • 참고 자료 : Next getStaticProps

// /pages/404.js
export default function Custom404() {
	return <h1>404 에러! - 페이지가 존재하지 않습니다</h1>
}

2. 500 페이지

• 매 방문마다 에러 페이지를 서버에서 렌더링하는 것은 에러에 대응하는 것을 복잡하게 만든다.
• 404 페이지와 마찬가지로 Next.js에서는 정적 500 페이지를 만들어 추가적인 에러 페이지 파일을 만들 필요 없이 바로 라우팅을 해줄 수 있다.
• pages/ 폴더에 500.js 파일을 만들어 커스텀 500 페이지를 만들 수 있다.
  • 404 페이지와 마찬가지로 getStaticProps()를 사용해 페이지에 data를 fetch할 수 있다.

// /pages/500.js
export default function Custom500() {
	return <h1>500 에러! - 서버에서 에러가 발생했습니다</h1>
}